<!--
 * @Date: 2022-05-30 13:45:16
 * @Author: 陶子
 * @LastEditTime: 2023-06-15 16:25:19
 * @FilePath: \jk_one-stop_pc\src\views\bigView\publicRoll.vue
 * @pageName: 这是--(公共滚动页面)--页面
-->
<template>
  <div class="livenessRoot">
    <div class='topBox' v-if="showTopBox">
      <div class="topTitle" :style="{ backgroundSize: headerTitle == '生产工单' ? '30% 40%' : '' }">
        <div class="imgline" v-if="headerTitle == '生产工单'"></div>
        <img src="~@/assets/img/screen-p1.png" alt="">
        {{ headerTitle }}
      </div>
    </div>
    <slot name="tableHeader"></slot>
    <div class="lastBox">
      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="defaultOption" @ScrollEnd='ScrollEnd'>
        <div class="itemBox" v-for="item in listData" :key="item.id">
          <slot name="rowBox" :item="item">
          </slot>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props: {
    rollData: {
      type: Array,
      default: () => []
    },
    headerTitle: {
      type: String,
      default: ''
    },
    showTopBox: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      moment,
      listData: [],
      resData: [],
      timer: 1,
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.15, // 数值越大速度滚动越快
        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0, // 单步运动停止的时间(默认值1000ms)
        // autoPlay: false, //
      }
    },
  },
  watch: {
    rollData: {
      handler(newVal, oldVal) {
        this.resData = JSON.parse(JSON.stringify(newVal))
        if (this.timer < 3) {
          this.listData = JSON.parse(JSON.stringify(newVal))
          this.resData = []
          this.timer++
        }
        this.$forceUpdate()
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() { },
  methods: {
    ScrollEnd() {
      if (this.resData.length > 0) {
        this.listData = JSON.parse(JSON.stringify(this.resData))
        this.resData = []
        this.$forceUpdate()
      }
    },
  },
}
</script>

<style scoped lang='less'>
.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.livenessRoot {
  width: 100%;
  height: 100%;
  padding: 0 0.15rem 0 0.1rem;

  // box-sizing: border-box;
  // padding-top: 0.1rem;
  // .topTitle {
  //   font-size: 0.2rem;
  //   color: rgba(255, 255, 255, 0.75);
  //   .flex(center,center);
  //   margin-bottom: 0.08rem;
  // }
  .lastBox {
    height: calc(100% - 1.05rem);

    div.itemBox {
      box-sizing: border-box;
      padding: 0.18rem 0.2rem;

      &:nth-child(2n + 2) {
        background: rgba(0, 120, 255, 0.12);
      }
    }
  }
}

.seamless-warp {
  height: 100%;
  overflow: hidden;
}

.topBox {
  box-sizing: border-box;
  padding: 0.13rem 0.57rem 0 0;
  width: 100%;
  height: 0.65rem;

  .topTitle {
    font-size: 0.18rem;
    display: flex;
    align-items: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    background: url('~@/assets/img/screen-p2.png') no-repeat;
    background-size: 120% 40%;
    background-position: left bottom;
    position: relative;

    img {
      width: 0.53rem;
      height: 0.52rem;
    }

    .imgline {
      height: 40%;
      width: 70%;
      position: absolute;
      bottom: 0;
      right: 0;
      border-top: solid 1px rgba(255, 255, 255, 0.4);
    }
  }
}
</style>
<style lang="less" scoped>
.seamless-warp {
  height: 100%;
  overflow: hidden;
}

.ant-progress-circle-trail {
  stroke: #888888 !important;
}

.itemBox {
  .itemBoxNine {
    .ant-progress-text {
      font-size: 0.18rem;
      color: #ffffff;
    }

    .ant-progress-inner {
      background-color: #888888;
    }
  }
}
</style>